<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享</title>

    <style>
        body{
            margin: 0;
            color: #fff;
            /*background: #333;*/
            font-size: 14px;
            font-weight: lighter;
        }
        span{
            color: blue;
        }

        .container {
            margin: 1em;
            color: black;
        }

        .container > span {
            color: #333;
        }

        .important {
            color: red;
        }

        span:nth-child(3) {
            color: yellow !important;
        }
        
        button[type=button]{
            width: 100px;
            height: 30px;
            border-radius: 30px;
            border: 1px outset #2cc57b;
            color: #fff;
            background: #2cc57b;
        }
    /**/
        /*button:active{*/
            /*border: 1px inset #eee;*/
            /*color: #2cc57b;*/
            /*background: #eee;*/
        /*}*/

        button:focus{
            /*outline: 0;*/
        }

        .ele-hide div {
            width: 100px;
            height: 100px;
            background: red;
            margin: 15px;
            padding: 10px;
            border: 5px solid green;
            display: inline-block;
            overflow: hidden;
        }

        .ele-hide .none {
            /*display: none;*/
        }

        .ele-hide .hidden {
            /*visibility: hidden;*/
        }

        .ele-hide .opacity0 {
            /*opacity: 0;*/
        }

        .ele-hide .height0 {
            /*box-sizing: border-box;*/
            /*height: 0;*/
            /*padding: 0;*/
            /*border: 0;*/
        }

        div:hover{
            /*outline: -webkit-focus-ring-color auto 5px;*/
        }

        .mask{
            position: fixed;
            background: rgba(0,0,0,.5);
            display: none;
            /*width: 100%;*/
            /*height: 100%;*/
            /*top: 0;*/
            /*left: 0;*/
            /*transition: 1s;*/
            /*z-index: 999;*/
        }

        .mask .content{
            /*transition: 1s;*/
            /*background: #fff;*/
        }

        .select-box{
            position: relative;
            width: 50%;
            margin-top: 3em;
            border-top: 1px solid #b2afaa;
            border-bottom: 1px solid #b2afaa;
            margin-bottom: 36px;
            padding: 5px;
            line-height: 2em;
            color: #ffffff;
            background: #4d4d4d;
            /*font-size: 18px;*/
        }

        .select-row{
            padding-left: 17px;
        }

        .detail-box{
            -webkit-transition: 1s;
            transition: 1s;
            overflow: hidden;
            /*height: 0;*/
            background: #404040;
        }
    </style>
</head>
<body>
  <div class="container">
    <span class="important">hello</span>
    <span style="color:green;">world</span>
    <span>!</span>
  </div>
  <div class="container">
      <div><button type="button">按钮</button></div>
  </div>
  <div class="container ele-hide">
      <div class="none">none</div>
      <div class="hidden">visibility</div>
      <div class="opacity0">opacity</div>
      <div class="height0">height</div>
  </div>

  <div class="container">
      <button id="show-mask">show mask</button>
  </div>
  <div class="mask">
      <div class="content">this is content</div>
  </div>

  <div class="select-box">
      <div class="select-row"><span class="circle"></span><span class="text">下拉列表</span><span id="arrow" class="arrow arrow-down"></span></div>
      <div class="detail-box">
          <p>1、段落1</p>
          <p>2、段落2</p>
          <p>3、段落3</p>
      </div>
  </div>

  <script>
      window.onload = function(){
          document.getElementById('show-mask').onclick = function(){
              document.getElementsByClassName('mask')[0].style.display = 'block';
          }

          var select = document.querySelector('.select-box'),
              detail = document.querySelector('.detail-box');
//              height = detail.style.height;
//          console.log(detail.style)

          detail.style.height = 0;

          select.onclick = function(){
              if(detail.style.height == '0px')
                  detail.style.height = '140px';
              else
                detail.style.height = 0;
          }
      }
  </script>
</body>
</html>